<template id="position-add">
    <div class="col-md-12">
        <div class="form" role="form">
            <div class="form-group">
                <label>标题：</label>
                <input class="form-control" v-model="item.itemTitle">
            </div>
            <div class="form-group">
                <label>图片：</label>
                <file-uploader v-model="item.itemImg" filetype="image" oss="true" policyUrl="/alioss/get_policy"></file-uploader>
            </div>
            <div class="form-group">
                <label>链接：</label>
                <input class="form-control" v-model="item.itemUrl" placeholder="http://">
            </div>
            <div class="form-group">
                <label>类型：</label>
                <select class="form-control" v-model="item.types">
                    <option value="0">请选择</option>
                    <option value="1">内容</option>
                    <option value="2">广告</option>
                </select>
            </div>
            <div class="form-group">
                <label>推荐位：</label>
                <select class="form-control" v-model="item.positions">
                    <option value="0">请选择</option>
                    <option v-for="(d, v, k) in positionsList" :value="v">{{d}}</option>
                </select>
            </div>
        </div>
    </div>
</template>
<script>
    Vue.component('position-add', {
        template: '#position-add',
        props: {
            value: {
                type: Object,
                default: {}
            },
            item_type: {
                type: Number,
                default: 0
            },
            item_url: {
                type: String,
                default: ''
            }
        },
        data: function () {
            return {
                result: "",
                item: {
                    itemType: this.item_type,
                    itemId: 0,
                    itemTitle: '',
                    itemImg: '',
                    itemUrl: this.item_url,
                    types: 1,
                    positions: 0,
                },
                positionsList: "",
            }
        },
        create: function () {
            console.log(this.value);
        },
        methods: {
            loadData: function (item) {
                let self = this;

                self.getPosition();

                self.result = item;

                self.item = {
                    itemType: self.item_type,
                    itemId: self.result.itemId,
                    itemTitle: self.result.itemTitle,
                    itemImg: self.result.itemImg,
                    itemUrl: window.PCUrl+self.item_url+self.result.itemId,
                    types: 1,
                    positions: 0,
                }
            },

            // 获取推荐位置
            getPosition: function () {
                let self = this;
                ajax({
                    uri: '/position/positions',
                    success: function (resp) {
                        self.positionsList = resp.data;
                    }.bind(this)
                });
            },

            // 保存数据
            save: function (callback) {
                var callback = callback || function () {};
                let self = this;

                if (self.item.itemTitle=='') {
                    // alert('请输入标题');
                    layer.msg('请输入标题');
                    return false;
                }
                if (self.item.types==0) {
                    // alert('请选择推荐内容类型');
                    layer.msg('请选择推荐内容类型');
                    return false;
                }
                if (self.item.positions==0) {
                    // alert('请选择推荐位');
                    layer.msg('请选择推荐位');
                    return false;
                }
                if (self.item.itemImg=='') {
                    // alert('请上传图片');
                    layer.msg('请上传图片');
                    return false;
                }

                ajax({
                    uri: '/position/save',
                    data: self.item,
                    success: function (resp) {
                        callback();
                    }.bind(this)
                })
            }
        },
    });
</script>